<template>
    <div id="myDiv" style="width: 600px; height: 400px"></div>
</template>

<script setup>
import Plotly from 'plotly.js-dist'
import { onMounted , ref} from 'vue'
import { generate_sql } from "../../utils/api.js";


const result = ref(null);

result.value = await generate_sql('上个月出账金额是多少');

console.log(result.value);


const loadData = async () => {
    result.value = await generate_sql('上个月出账金额是多少');
    console.log(result.value)
};

onMounted(() => {
    let values = [
        ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
        [1200000, 20000, 80000, 2000, 12120000],
        [1300000, 20000, 70000, 2000, 130902000],
        [1300000, 20000, 120000, 2000, 131222000],
        [1400000, 20000, 90000, 2000, 14102000]]

    let headerColor = "grey";
    let rowEvenColor = "lightgrey";
    let rowOddColor = "white";

    let data = [{
        type: 'table',
        header: {
            values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
            ["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
            align: "center",
            line: { width: 1, color: 'black' },
            fill: { color: headerColor },
            font: { family: "Arial", size: 12, color: "white" }
        },
        cells: {
            values: values,
            align: "center",
            line: { color: "black", width: 1 },
            fill: {
                color: [[rowOddColor, rowEvenColor, rowOddColor,
                    rowEvenColor, rowOddColor]]
            },
            font: { family: "Arial", size: 11, color: ["black"] }
        }
    }]
    Plotly.newPlot('myDiv', data);
})
</script>